<template>
    <div class="card">
        更新密码
    </div>
    <div class="card">
        <el-form
                ref="ruleFormRef"
                style="max-width: 600px"
                :model="ruleForm"
                status-icon
                :rules="rules"
                label-width="80px"
        >
            <el-form-item label="旧密码" prop="oldPass">
                <el-input v-model.number="ruleForm.oldPass"/>
            </el-form-item>
            <el-form-item label="新密码" prop="newPass">
                <el-input v-model="ruleForm.newPass" type="password" autocomplete="off"/>
            </el-form-item>
            <el-form-item label="确认密码" prop="checkPass">
                <el-input
                        v-model="ruleForm.checkPass"
                        type="password"
                        autocomplete="off"
                />
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="submitForm(ruleFormRef)">
                    修改
                </el-button>
                <el-button @click="resetForm(ruleFormRef)">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup>
import {reactive, ref} from 'vue'
import {ElMessage} from 'element-plus'
import myAxios from "@/axios/axios.js";
import {useRouter} from "vue-router";

const router = useRouter()
const ruleFormRef = ref()

const validateOldPass = (rule, value, callback) => {
    if (value === '') {
        callback(new Error('请输入旧密码'))
    } else if (value.length < 8) {
        // callback(new Error('旧密码长度不能小于8个字符'))
    } else {
        callback()
    }
}

const validatePass = (rule, value, callback) => {
    if (value === '') {
        callback(new Error('请输入新密码'))
    } else if (value.length < 8) {
        callback(new Error('新密码长度不能小于8个字符'))
    } else {
        if (ruleForm.checkPass !== '') {
            if (!ruleFormRef.value) return
            ruleFormRef.value.validateField('checkPass')
        }
        callback()
    }
}

const validatePass2 = (rule, value, callback) => {
    if (value === '') {
        callback(new Error('请再次输入新密码'))
    } else if (value !== ruleForm.newPass) {
        callback(new Error('两次输入的密码不一致'))
    } else {
        callback()
    }
}

const ruleForm = reactive({
    user: JSON.parse(localStorage.getItem('code_user') || '{}'),
    oldPass: '',
    newPass: '',
    checkPass: ''
})

const rules = reactive({
    oldPass: [{validator: validateOldPass, trigger: 'change'}],
    newPass: [{validator: validatePass, trigger: 'change'}],
    checkPass: [{validator: validatePass2, trigger: 'blur'}]
})

const submitForm = (formEl) => {
    if (!formEl) return
    formEl.validate(async (valid) => {
        if (valid) {
            const res = await myAxios.post('/user/updatePassword', {
                userId: ruleForm.user.id,
                oldPassword: ruleForm.oldPass,
                newPassword: ruleForm.newPass,
                confirmPassword: ruleForm.checkPass
            })
            if (res.code === 0 && res.data) {
                ElMessage.success('密码更新成功')
                await router.replace('/login')
            }
        } else {
            ElMessage.error(res.message)
        }
    })
}

const resetForm = (formEl) => {
    if (!formEl) return
    formEl.resetFields()
}
</script>


<style scoped>

</style>